Adding a more full set of theme colors to schema

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',
@@ -32,12 +33,9 @@ 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 }
@@ -55,7 +53,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/80 mix-blend-multiply'
     /> 
   ) }
   <div class={clsx(
@@ -104,8 +102,7 @@ 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'},
+          toTextClass(color),
           { 'text-center': textAlignment === 'center' }
         )}>
           <RichText content={content} />

src/apps/pages/sections/ColumnContent.astro

@@ -20,7 +20,7 @@ const BlockTypes = {
 )}
 
 { 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>
 )}

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,12 @@ 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
+        )} />
       ))
     }
   </div>

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/Layout.astro

@@ -31,13 +31,24 @@ 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 textDark = branding.content_color || 'var(--color-black)';
+const textLight = branding.content_dark_bg || 'var(--color-white)';
 
+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 textPrimary = useBlackText(colorPrimary) ? textDark : textLight;
+const textSecondary = !colorSecondary || useBlackText(colorSecondary) ? textDark : textLight;
 
 const colorLayout = branding.background_color || 'var(--color-white)';
+const colorLayoutAlternate = branding.background_alternate || 'var(--color-neutral-light)';
+
+//these are for use in the page builder components, where the background will be `colorLayout` by default
+const colorContent = useBlackText(colorLayout) ? textDark : textLight;
+const colorContentAlternate = branding.content_alternate || 'var(--color-neutral-dark)';
 
 const currentLocale = Astro.currentLocale;
 const lang = getLanguageFromUrl(Astro.url.pathname);
@@ -134,9 +145,15 @@ if (config.gallery) {
         customFontBody: fontBody,
         customColorPrimary: colorPrimary,
         customColorSecondary: colorSecondary,
+        customColorTertiary: colorTertiary,
         customTextPrimary: textPrimary,
         customTextSecondary: textSecondary,
-        customColorLayout: colorLayout
+        customContent: colorContent,
+        customContentAlternate: colorContentAlternate,
+        customContentLight: textLight,
+        customContentDark: textDark,
+        customColorLayout: colorLayout,
+        customColorLayoutAlternate: colorLayoutAlternate
       }}
     >
     </style>

src/layouts/Page.astro

@@ -10,7 +10,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;
@@ -39,7 +41,12 @@ const SectionTypes = {
 >
   { _.map(page?.sections, section => (
     <section
-      class='relative'
+      class={clsx(
+        'page-builder',
+        'relative',
+        toBackgroundClass(section.background),
+        toTextClass(section.text)
+      )}
     >
       { section.__typename === SectionTypes.carousel && (
         <Container>

src/styles/index.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Baskervville+SC:[email protected]&family=Baskervville:ital,wght@0,400..700;1,400..700&display=swap&family=Afacad:ital,wght@0,400..700;1,400..700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 
 @import 'tailwindcss';
 @import '@performant-software/core-data/tailwind.css';
@@ -33,9 +33,15 @@
 
   --color-primary: var(--customColorPrimary, var(--color-default-primary));
   --color-secondary: var(--customColorSecondary, var(--color-default-secondary));
+  --color-tertiary: var(--customColorTertiary, var(--color-white));
   --color-text-primary: var(--customTextPrimary, var(--color-white));
   --color-text-secondary: var(--customTextSecondary, var(--color-black));
+  --color-content: var(--customContent, var(--color-black));
+  --color-content-alt: var(--customContentAlternate, var(--color-neutral-dark));
   --color-layout: var(--customColorLayout, var(--color-white));
+  --color-layout-alt: var(--customColorLayoutAlternate, var(--color-netural-light));
+  --color-text-light: var(--customContentLight, var(--color-white));
+  --color-text-dark: var(--customContentDark, var(--color-black));
 
   --font-header: var(--customFontHeader, Inter);
   --font-body: var(--customFontBody, Inter);
@@ -72,6 +78,38 @@ h1, h2, h3, h4, h5, h6 {
   color: var(--color-text-secondary);
 }
 
+
+/*
+* Page builder styles
+*/
+
+.page-builder h1, .page-builder h2, .page-builder h3, .page-builder h4 {
+  font-weight: 400;
+}
+
+.page-builder .prose h1 {
+  font-variant: small-caps;
+  font-size: 3rem;
+}
+
+.page-builder .prose h2 {
+  font-size: 2.4rem;
+}
+
+.page-builder .prose h3, .page-builder .prose h4 {
+  font-style: italic;
+  font-size: 1.5rem;
+}
+
+.page-builder .prose h4 {
+  color: var(--color-secondary);
+  margin-bottom: 0;
+}
+
+.page-builder .link-button + .link-button {
+  margin-left: 1.5rem;
+}
+
 /*
  * Swiper styles
  */

src/utils/pageBuilder.ts

@@ -0,0 +1,56 @@
+export const toTextClass = (color: string) => {
+  switch (color) {
+    case 'primary':
+      return '!text-primary';
+    case 'secondary':
+      return '!text-secondary';
+    case 'tertiary':
+      return '!text-tertiary';
+    case 'content_light':
+      return '!text-text-light';
+    case 'content_dark':
+      return '!text-text-dark';
+    case 'content_alternate':
+      return '!text-content-alt';
+    default:
+      return 'text-content'
+  }
+};
+
+export const toBackgroundClass = (color: string) => {
+  switch (color) {
+    case 'primary':
+      return '!bg-primary';
+    case 'secondary':
+      return '!bg-secondary';
+    case 'tertiary':
+      return '!bg-tertiary';
+    case 'layout_alternate':
+      return '!bg-layout-alt';
+    default:
+      return 'bg-layout';
+  } 
+};
+
+export const toBorderClass = (color: string) => {
+  switch (color) {
+    case 'primary':
+      return 'border-2 border-primary';
+    case 'secondary':
+      return 'border-2 border-secondary';
+    case 'tertiary':
+      return 'border-2 border-tertiary';
+    case 'layout':
+      return 'border-2 border-layout';
+    case 'layout_alternate':
+      return 'border-2 border-layout-alt';
+    case 'content_light':
+      return 'border-2 border-text-light';
+    case 'content_dark':
+      return 'border-2 border-text-dark';
+    case 'content_alternate':
+      return 'border-2 border-content-alt';
+    default:
+      return '';
+  } 
+};