astro-tractstack 2.0.19 → 2.0.20

package/templates/src/utils/compositor/templateMarkdownStyles.ts

@@ -1,1273 +0,0 @@
-import { ulid } from 'ulid';
-import { getColor, tailwindToHex } from './tailwindColors';
-import type { Theme } from '@/types/tractstack';
-import type {
-  ArtpackImageNode,
-  TemplatePane,
-  ParentClassesPayload,
-} from '@/types/compositorTypes';
-
-const defaultMarkdownBody = `### tell us what happened\n\nyour story continues... and continues... and continues... and continues... and continues... and continues... with nice layout and typography.\n\n#### Add in those important details\n\nWrite for both the humans and for the search engine rankings!\n\nCapture attention and make moves.`;
-const defaultSectionBody = `### An incredible journey awaits... An incredible journey awaits... An incredible journey awaits...`;
-const defaultIntroBody = `## An incredible journey awaits\n\nAn incredible journey awaits... An incredible journey awaits...`;
-const defaultImageHeroBody = `1. ## An incredible journey awaits\n\n* ![Placeholder image](/static.jpg)\n`;
-
-export const templateCategories = [
-  {
-    id: 'all',
-    title: 'All designs',
-    getTemplates: (theme: Theme, brand: string, useOdd: boolean) => [
-      ...templateCategories[1].getTemplates(theme, brand, useOdd),
-      ...templateCategories[2].getTemplates(theme, brand, useOdd),
-      ...templateCategories[3].getTemplates(theme, brand, useOdd),
-      ...templateCategories[4].getTemplates(theme, brand, useOdd),
-    ],
-  },
-  {
-    id: 'paragraph',
-    title: 'Tell your story',
-    getTemplates: (theme: Theme, brand: string, useOdd: boolean) => [
-      getJustCopyDesign(theme, brand, useOdd, false, `default`),
-      getJustCopyDesign(theme, brand, useOdd, true, `default`),
-      getJustCopyDesign(theme, brand, useOdd, false, `onecol`),
-      getJustCopyDesign(theme, brand, useOdd, true, `onecol`),
-      getJustCopyDesign(theme, brand, useOdd, false, `center`),
-      getJustCopyDesign(theme, brand, useOdd, true, `center`),
-    ],
-  },
-  {
-    id: 'intro',
-    title: 'Page Intro sections',
-    getTemplates: (theme: Theme, brand: string, useOdd: boolean) => [
-      getIntroDesign(theme, brand, useOdd, false, `default`),
-      getIntroDesign(theme, brand, useOdd, true, `default`),
-      getIntroDesign(theme, brand, useOdd, false, `onecol`),
-      getIntroDesign(theme, brand, useOdd, true, `onecol`),
-      getIntroDesign(theme, brand, useOdd, false, `center`),
-      getIntroDesign(theme, brand, useOdd, true, `center`),
-    ],
-  },
-  {
-    id: 'section',
-    title: 'Sub-title sections',
-    getTemplates: (theme: Theme, brand: string, useOdd: boolean) => [
-      getSubTitleDesign(theme, brand, useOdd, false, `default`),
-      getSubTitleDesign(theme, brand, useOdd, true, `default`),
-      getSubTitleDesign(theme, brand, useOdd, false, `onecol`),
-      getSubTitleDesign(theme, brand, useOdd, true, `onecol`),
-      getSubTitleDesign(theme, brand, useOdd, false, `center`),
-      getSubTitleDesign(theme, brand, useOdd, true, `center`),
-      getSubTitleDesign(theme, brand, useOdd, false, `default-brand`),
-      getSubTitleDesign(theme, brand, useOdd, false, `onecol-brand`),
-      getSubTitleDesign(theme, brand, useOdd, false, `center-brand`),
-    ],
-  },
-  {
-    id: 'with-background',
-    title: 'With Background Image',
-    getTemplates: (theme: Theme, brand: string, useOdd: boolean) => [
-      getWithArtpackImageDesign(
-        getSubTitleDesign,
-        theme,
-        brand,
-        useOdd,
-        't8k',
-        'blast',
-        'cover',
-        true,
-        'default'
-      ),
-      getWithArtpackImageDesign(
-        getSubTitleDesign,
-        theme,
-        brand,
-        useOdd,
-        't8k',
-        'blast',
-        'cover',
-        true,
-        'onecol'
-      ),
-      getWithArtpackImageDesign(
-        getSubTitleDesign,
-        theme,
-        brand,
-        useOdd,
-        't8k',
-        'blast',
-        'cover',
-        true,
-        'center'
-      ),
-      getWithArtpackImageDesign(
-        getIntroDesign,
-        theme,
-        brand,
-        useOdd,
-        't8k',
-        'blast',
-        'cover',
-        true,
-        'default'
-      ),
-      getWithArtpackImageDesign(
-        getIntroDesign,
-        theme,
-        brand,
-        useOdd,
-        't8k',
-        'blast',
-        'cover',
-        true,
-        'onecol'
-      ),
-      getWithArtpackImageDesign(
-        getIntroDesign,
-        theme,
-        brand,
-        useOdd,
-        't8k',
-        'blast',
-        'cover',
-        true,
-        'center'
-      ),
-    ],
-  },
-  //{
-  //  id: "image-hero",
-  //  title: "Image Hero Section",
-  //  getTemplates: (theme: Theme, brand: string, useOdd: boolean) => [
-  //    getImageHeroSectionDefault(theme, brand, useOdd),
-  //    getImageHeroSectionDefault(theme, brand, useOdd, true),
-  //  ],
-  //},
-] as const;
-
-export function getWithArtpackImageDesign(
-  designFn: (
-    theme: Theme,
-    brand: string,
-    useOdd: boolean,
-    bordered?: boolean,
-    variant?: string
-  ) => TemplatePane,
-  theme: Theme,
-  brand: string,
-  useOdd: boolean,
-  collection: string = 't8k',
-  imageName: string = 'blast',
-  objectFit: 'cover' | 'contain' | 'fill' = 'cover',
-  bordered: boolean = true,
-  variant: string = 'default'
-): TemplatePane {
-  const baseTemplate = designFn(theme, brand, useOdd, bordered, variant);
-
-  const artpackNode: ArtpackImageNode = {
-    nodeType: 'BgPane',
-    id: '',
-    parentId: '',
-    type: 'artpack-image',
-    collection,
-    image: imageName,
-    src: `/artpacks/${collection}/${imageName}_1920px.webp`,
-    srcSet: `/artpacks/${collection}/${imageName}_1920px.webp 1920w, /artpacks/${collection}/${imageName}_1080px.webp 1080w, /artpacks/${collection}/${imageName}_600px.webp 600w`,
-    alt: `Artpack image from ${collection} collection`,
-    objectFit,
-  };
-
-  baseTemplate.title = `${baseTemplate.title} with artpack background`;
-  baseTemplate.slug = `${baseTemplate.slug}-artpack`;
-
-  if (baseTemplate.markdown?.parentClasses) {
-    baseTemplate.markdown.parentClasses.forEach((classSet) => {
-      if (classSet.mobile.bgCOLOR === 'mywhite') {
-        classSet.mobile.bgCOLOR = 'transparent';
-      }
-    });
-  }
-
-  return {
-    ...baseTemplate,
-    bgPane: artpackNode,
-  };
-}
-
-const getBaseParagraphClasses = (theme: Theme) => ({
-  h2: {
-    mobile: {
-      fontWEIGHT: 'bold',
-      textCOLOR: getColor(
-        {
-          light: 'brand-7',
-          'light-bw': 'brand-1',
-          'light-bold': 'brand-5',
-          dark: 'brand-4',
-          'dark-bw': 'brand-8',
-          'dark-bold': 'brand-3',
-        },
-        theme
-      ),
-      textSIZE: '3xl',
-      lineHEIGHT: 'snug',
-      fontFACE: 'action',
-      pt: '6',
-      pb: '2.5',
-    },
-    tablet: {
-      textSIZE: '5xl',
-      pt: '9',
-      pb: '3.5',
-    },
-    desktop: {
-      textSIZE: '6xl',
-      pt: '12',
-    },
-  },
-  h3: {
-    mobile: {
-      fontWEIGHT: 'bold',
-      textCOLOR: getColor(
-        {
-          light: 'brand-7',
-          'light-bw': 'brand-1',
-          'light-bold': 'brand-5',
-          dark: 'brand-4',
-          'dark-bw': 'white',
-          'dark-bold': 'brand-3',
-        },
-        theme
-      ),
-      textSIZE: 'xl',
-      fontFACE: 'action',
-      pt: '6',
-      pb: '2.5',
-    },
-    tablet: {
-      textSIZE: '3xl',
-      pt: '9',
-      pb: '3.5',
-    },
-    desktop: {
-      pt: '12',
-    },
-  },
-  h4: {
-    mobile: {
-      textCOLOR: getColor(
-        {
-          light: 'brand-7',
-          'light-bw': 'brand-1',
-          'light-bold': 'brand-5',
-          dark: 'brand-4',
-          'dark-bw': 'white',
-          'dark-bold': 'brand-3',
-        },
-        theme
-      ),
-      textSIZE: 'xl',
-      fontFACE: 'action',
-      pt: '4',
-    },
-    tablet: {
-      textSIZE: '2xl',
-      pt: '6',
-    },
-    desktop: {},
-  },
-  p: {
-    mobile: {
-      textCOLOR: getColor(
-        {
-          light: 'brand-7',
-          'light-bw': 'brand-1',
-          'light-bold': 'brand-7',
-          dark: 'brand-8',
-          'dark-bw': 'brand-2',
-          'dark-bold': 'brand-8',
-        },
-        theme
-      ),
-      textSIZE: 'lg',
-      lineHEIGHT: 'loose',
-      py: '1.5',
-    },
-    tablet: {
-      textSIZE: 'xl',
-      py: '2.5',
-    },
-    desktop: {},
-  },
-});
-
-const getBaseParentClasses = (): ParentClassesPayload => {
-  return [
-    {
-      mobile: {
-        mx: '5',
-        my: '16',
-      },
-      tablet: {
-        mx: '10',
-      },
-      desktop: {},
-    },
-    {
-      mobile: {
-        mx: 'auto',
-        maxW: 'none',
-      },
-      tablet: {
-        maxW: 'screen-lg',
-      },
-      desktop: {
-        maxW: 'screen-xl',
-      },
-    },
-    {
-      mobile: {
-        px: '9',
-        py: '10',
-      },
-      tablet: {
-        px: '14',
-      },
-      desktop: {
-        px: '32',
-      },
-    },
-  ];
-};
-
-export function getJustCopyDesign(
-  theme: Theme,
-  brand: string,
-  useOdd: boolean,
-  bordered: boolean = false,
-  variant: string = `default`
-): TemplatePane {
-  let title = '';
-  let slug = '';
-  const baseClasses = getBaseParentClasses();
-  switch (variant) {
-    case `onecol`: {
-      title = !bordered
-        ? 'Copy goes here - one column'
-        : 'Copy goes here with border - one column';
-      slug = !bordered ? 'paragraph-onecol' : 'paragraph-onecol-bordered';
-      baseClasses[2].mobile.textALIGN = 'left';
-      baseClasses[2].mobile.textWRAP = 'pretty';
-      baseClasses[2].mobile.maxW = '3xl';
-      if (bordered) {
-        baseClasses[2].mobile.rounded = 'lg';
-        baseClasses[2].mobile.shadow = 'md';
-        baseClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-      break;
-    }
-
-    case `center`: {
-      title = !bordered
-        ? 'Copy goes here - centered'
-        : 'Copy goes here with border - centered';
-      slug = !bordered ? 'paragraph-centered' : 'paragraph-centered-bordered';
-      baseClasses[2].mobile.textALIGN = 'center';
-      baseClasses[2].mobile.textWRAP = 'balance';
-      if (bordered) {
-        baseClasses[2].mobile.rounded = 'lg';
-        baseClasses[2].mobile.shadow = 'md';
-        baseClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-      break;
-    }
-
-    default: {
-      title = !bordered ? 'Copy goes here' : 'Copy goes here with border';
-      slug = !bordered ? 'paragraph-default' : 'paragraph-default-bordered';
-      baseClasses[2].mobile.textALIGN = 'left';
-      baseClasses[2].mobile.textWRAP = 'pretty';
-      if (bordered) {
-        baseClasses[2].mobile.rounded = 'lg';
-        baseClasses[2].mobile.shadow = 'md';
-        baseClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-    }
-  }
-
-  return {
-    nodeType: 'Pane',
-    title,
-    slug,
-    id: '',
-    parentId: '',
-    isDecorative: false,
-    bgColour: tailwindToHex(
-      getColor(
-        {
-          light: !useOdd ? 'brand-2' : 'white',
-          'light-bw': !useOdd ? 'white' : 'brand-2',
-          'light-bold': !useOdd ? 'brand-2' : 'white',
-          dark: !useOdd ? 'black' : 'brand-1',
-          'dark-bw': !useOdd ? 'black' : 'brand-1',
-          'dark-bold': !useOdd ? 'brand-1' : 'black',
-        },
-        theme
-      ),
-      brand
-    ),
-    markdown: {
-      nodeType: 'Markdown',
-      id: '',
-      parentId: '',
-      type: 'markdown',
-      markdownId: ulid(),
-      defaultClasses: getBaseParagraphClasses(theme),
-      parentClasses: baseClasses,
-      markdownBody: defaultMarkdownBody,
-    },
-  };
-}
-
-export function getSubTitleDesign(
-  theme: Theme,
-  brand: string,
-  useOdd: boolean,
-  bordered: boolean = false,
-  variant: string = `default`
-): TemplatePane {
-  const baseClasses = getBaseParentClasses();
-  let title = '';
-  let slug = '';
-  let bgColour = '';
-  let textCOLOR = '';
-
-  switch (variant) {
-    case `onecol`: {
-      title = !bordered
-        ? 'Title section One Column'
-        : 'Title section one column with border';
-      slug = !bordered ? 'section-onecol' : 'section-onecol-bordered';
-      textCOLOR = getColor(
-        {
-          light: 'black',
-          'light-bw': 'black',
-          'light-bold': 'brand-5',
-          dark: 'brand-4',
-          'dark-bw': 'brand-8',
-          'dark-bold': 'brand-3',
-        },
-        theme
-      );
-      bgColour = tailwindToHex(
-        getColor(
-          {
-            light: !useOdd ? 'brand-2' : 'white',
-            'light-bw': !useOdd ? 'white' : 'brand-2',
-            'light-bold': !useOdd ? 'brand-2' : 'white',
-            dark: !useOdd ? 'black' : 'brand-1',
-            'dark-bw': !useOdd ? 'black' : 'brand-1',
-            'dark-bold': !useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        ),
-        brand
-      );
-      baseClasses[2].mobile.textALIGN = 'left';
-      baseClasses[2].mobile.textWRAP = 'pretty';
-      baseClasses[2].mobile.maxW = '3xl';
-      if (bordered) {
-        baseClasses[2].mobile.rounded = 'lg';
-        baseClasses[2].mobile.shadow = 'md';
-        baseClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-      break;
-    }
-
-    case `center`: {
-      title = !bordered
-        ? 'Title section centered'
-        : 'Title section centered with border';
-      slug = !bordered ? 'section-center' : 'section-center-bordered';
-      textCOLOR = getColor(
-        {
-          light: 'black',
-          'light-bw': 'black',
-          'light-bold': 'brand-5',
-          dark: 'brand-4',
-          'dark-bw': 'brand-8',
-          'dark-bold': 'brand-3',
-        },
-        theme
-      );
-      bgColour = tailwindToHex(
-        getColor(
-          {
-            light: !useOdd ? 'brand-2' : 'white',
-            'light-bw': !useOdd ? 'white' : 'brand-2',
-            'light-bold': !useOdd ? 'brand-2' : 'white',
-            dark: !useOdd ? 'black' : 'brand-1',
-            'dark-bw': !useOdd ? 'black' : 'brand-1',
-            'dark-bold': !useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        ),
-        brand
-      );
-      baseClasses[2].mobile.textALIGN = 'center';
-      baseClasses[2].mobile.textWRAP = 'balance';
-      if (bordered) {
-        baseClasses[2].mobile.rounded = 'lg';
-        baseClasses[2].mobile.shadow = 'md';
-        baseClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-      break;
-    }
-
-    case `onecol-brand`: {
-      (title = 'Title section v2 one column'),
-        (slug = 'section-onecol-brand'),
-        (textCOLOR = getColor(
-          {
-            light: 'black',
-            'light-bw': 'black',
-            'light-bold': 'black',
-            dark: 'black',
-            'dark-bw': 'black',
-            'dark-bold': 'black',
-          },
-          theme
-        ));
-      bgColour = tailwindToHex(
-        getColor(
-          {
-            light: !useOdd ? 'brand-3' : 'brand-4',
-            'light-bw': !useOdd ? 'brand-3' : 'brand-4',
-            'light-bold': !useOdd ? 'brand-3' : 'brand-4',
-            dark: !useOdd ? 'brand-3' : 'brand-4',
-            'dark-bw': !useOdd ? 'brand-3' : 'brand-4',
-            'dark-bold': !useOdd ? 'brand-3' : 'brand-4',
-          },
-          theme
-        ),
-        brand
-      );
-      baseClasses[2].mobile.textALIGN = 'left';
-      baseClasses[2].mobile.textWRAP = 'pretty';
-      baseClasses[2].mobile.maxW = '3xl';
-      if (bordered) {
-        baseClasses[2].mobile.shadow = 'md';
-        baseClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-      break;
-    }
-
-    case `center-brand`: {
-      (title = 'Title section v2 centered'),
-        (slug = 'section-center-brand'),
-        (textCOLOR = getColor(
-          {
-            light: 'black',
-            'light-bw': 'black',
-            'light-bold': 'black',
-            dark: 'black',
-            'dark-bw': 'black',
-            'dark-bold': 'black',
-          },
-          theme
-        ));
-      bgColour = tailwindToHex(
-        getColor(
-          {
-            light: !useOdd ? 'brand-3' : 'brand-4',
-            'light-bw': !useOdd ? 'brand-3' : 'brand-4',
-            'light-bold': !useOdd ? 'brand-3' : 'brand-4',
-            dark: !useOdd ? 'brand-3' : 'brand-4',
-            'dark-bw': !useOdd ? 'brand-3' : 'brand-4',
-            'dark-bold': !useOdd ? 'brand-3' : 'brand-4',
-          },
-          theme
-        ),
-        brand
-      );
-      baseClasses[2].mobile.textALIGN = 'center';
-      baseClasses[2].mobile.textWRAP = 'balance';
-      if (bordered) {
-        baseClasses[2].mobile.rounded = 'lg';
-        baseClasses[2].mobile.shadow = 'md';
-        baseClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-      break;
-    }
-
-    case `default-brand`: {
-      (title = 'Title section v2'),
-        (slug = 'section-default-brand'),
-        (textCOLOR = getColor(
-          {
-            light: 'black',
-            'light-bw': 'black',
-            'light-bold': 'black',
-            dark: 'black',
-            'dark-bw': 'black',
-            'dark-bold': 'black',
-          },
-          theme
-        ));
-      bgColour = tailwindToHex(
-        getColor(
-          {
-            light: !useOdd ? 'brand-3' : 'brand-4',
-            'light-bw': !useOdd ? 'brand-3' : 'brand-4',
-            'light-bold': !useOdd ? 'brand-3' : 'brand-4',
-            dark: !useOdd ? 'brand-3' : 'brand-4',
-            'dark-bw': !useOdd ? 'brand-3' : 'brand-4',
-            'dark-bold': !useOdd ? 'brand-3' : 'brand-4',
-          },
-          theme
-        ),
-        brand
-      );
-      baseClasses[2].mobile.textALIGN = 'left';
-      baseClasses[2].mobile.textWRAP = 'pretty';
-      if (bordered) {
-        baseClasses[2].mobile.shadow = 'md';
-        baseClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-      break;
-    }
-
-    default: {
-      title = !bordered ? 'Title section' : 'Title section with border';
-      slug = !bordered ? 'section-default' : 'section-default-bordered';
-      textCOLOR = getColor(
-        {
-          light: 'black',
-          'light-bw': 'black',
-          'light-bold': 'brand-5',
-          dark: 'brand-4',
-          'dark-bw': 'brand-8',
-          'dark-bold': 'brand-3',
-        },
-        theme
-      );
-      bgColour = tailwindToHex(
-        getColor(
-          {
-            light: !useOdd ? 'brand-2' : 'white',
-            'light-bw': !useOdd ? 'white' : 'brand-2',
-            'light-bold': !useOdd ? 'brand-2' : 'white',
-            dark: !useOdd ? 'black' : 'brand-1',
-            'dark-bw': !useOdd ? 'black' : 'brand-1',
-            'dark-bold': !useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        ),
-        brand
-      );
-      baseClasses[2].mobile.textALIGN = 'left';
-      baseClasses[2].mobile.textWRAP = 'pretty';
-      if (bordered) {
-        baseClasses[2].mobile.rounded = 'lg';
-        baseClasses[2].mobile.shadow = 'md';
-        baseClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-    }
-  }
-
-  return {
-    nodeType: 'Pane',
-    id: '',
-    parentId: '',
-    isDecorative: false,
-    title,
-    slug,
-    bgColour,
-    markdown: {
-      nodeType: 'Markdown',
-      id: '',
-      parentId: '',
-      type: 'markdown',
-      markdownId: ulid(),
-      defaultClasses: {
-        h2: {
-          mobile: {
-            fontWEIGHT: 'bold',
-            textCOLOR,
-            textSIZE: '3xl',
-            fontFACE: 'action',
-          },
-          tablet: {
-            textSIZE: '5xl',
-          },
-          desktop: {
-            textSIZE: '6xl',
-          },
-        },
-        h3: {
-          mobile: {
-            fontWEIGHT: 'bold',
-            textCOLOR,
-            textSIZE: '2xl',
-            fontFACE: 'action',
-          },
-          tablet: {
-            textSIZE: '3xl',
-          },
-          desktop: {},
-        },
-        h4: {
-          mobile: {
-            textCOLOR,
-            textSIZE: 'xl',
-            fontFACE: 'action',
-            pt: '4',
-          },
-          tablet: {
-            textSIZE: '2xl',
-            pt: '6',
-          },
-          desktop: {},
-        },
-        p: {
-          mobile: {
-            textCOLOR,
-            textSIZE: 'lg',
-            py: '1.5',
-          },
-          tablet: {
-            textSIZE: 'xl',
-            py: '2.5',
-          },
-          desktop: {},
-        },
-      },
-      parentClasses: baseClasses,
-      markdownBody: defaultSectionBody,
-    },
-  };
-}
-
-const getBaseIntroClasses = (theme: Theme) => ({
-  h2: {
-    mobile: {
-      fontWEIGHT: 'bold',
-      textCOLOR: getColor(
-        {
-          light: 'brand-7',
-          'light-bw': 'brand-1',
-          'light-bold': 'brand-5',
-          dark: 'brand-4',
-          'dark-bw': 'brand-8',
-          'dark-bold': 'brand-3',
-        },
-        theme
-      ),
-      textSIZE: '3xl',
-      lineHEIGHT: 'snug',
-      fontFACE: 'action',
-    },
-    tablet: {
-      textSIZE: '4xl',
-    },
-    desktop: {
-      textSIZE: '5xl',
-    },
-  },
-  h3: {
-    mobile: {
-      fontWEIGHT: 'bold',
-      textCOLOR: getColor(
-        {
-          light: 'brand-7',
-          'light-bw': 'brand-1',
-          'light-bold': 'brand-5',
-          dark: 'brand-4',
-          'dark-bw': 'white',
-          'dark-bold': 'brand-3',
-        },
-        theme
-      ),
-      textSIZE: 'xl',
-      lineHEIGHT: 'snug',
-      fontFACE: 'action',
-    },
-    tablet: {
-      textSIZE: '3xl',
-    },
-    desktop: {},
-  },
-  h4: {
-    mobile: {
-      textCOLOR: getColor(
-        {
-          light: 'brand-7',
-          'light-bw': 'brand-1',
-          'light-bold': 'brand-5',
-          dark: 'brand-4',
-          'dark-bw': 'white',
-          'dark-bold': 'brand-3',
-        },
-        theme
-      ),
-      textSIZE: 'xl',
-      lineHEIGHT: 'snug',
-      fontFACE: 'action',
-      pt: '4',
-    },
-    tablet: {
-      textSIZE: '2xl',
-      pt: '6',
-    },
-    desktop: {},
-  },
-  p: {
-    mobile: {
-      textCOLOR: getColor(
-        {
-          light: 'brand-7',
-          'light-bw': 'brand-1',
-          'light-bold': 'brand-7',
-          dark: 'brand-8',
-          'dark-bw': 'brand-2',
-          'dark-bold': 'brand-8',
-        },
-        theme
-      ),
-      textSIZE: 'lg',
-      lineHEIGHT: 'loose',
-      py: '1.5',
-    },
-    tablet: {
-      textSIZE: 'xl',
-      py: '2.5',
-    },
-    desktop: {},
-  },
-});
-
-const getIntroBaseParentClasses = (): ParentClassesPayload => [
-  {
-    mobile: {
-      mx: '5',
-      mt: '16',
-      mb: '16',
-    },
-    tablet: {
-      mx: '10',
-      mt: '20',
-    },
-    desktop: {},
-  },
-  {
-    mobile: {
-      mx: 'auto',
-      maxW: 'none',
-    },
-    tablet: {
-      maxW: 'screen-lg',
-    },
-    desktop: {
-      maxW: 'screen-xl',
-    },
-  },
-  {
-    mobile: {
-      px: '9',
-      py: '10',
-    },
-    tablet: {
-      px: '14',
-    },
-    desktop: {
-      px: '32',
-    },
-  },
-];
-
-export const getIntroDesign = (
-  theme: Theme,
-  brand: string,
-  useOdd: boolean = false,
-  bordered: boolean = false,
-  variant: string = `default`
-): TemplatePane => {
-  const parentClasses = getIntroBaseParentClasses();
-  let title = '';
-  let slug = '';
-  switch (variant) {
-    case `center`: {
-      (title = !bordered
-        ? 'Intro section centered'
-        : 'Intro section centered with border'),
-        (slug = !bordered ? 'intro-centered' : 'intro-centered-bordered'),
-        (parentClasses[2].mobile.textALIGN = 'center');
-      parentClasses[2].mobile.textWRAP = 'balance';
-      if (bordered) {
-        parentClasses[2].mobile.rounded = 'lg';
-        parentClasses[2].mobile.shadow = 'lg';
-        parentClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-      break;
-    }
-
-    case `onecol`: {
-      (title = !bordered
-        ? 'Intro section one column'
-        : 'Intro section one column with border'),
-        (slug = !bordered ? 'intro-onecol' : 'intro-onecol-bordered'),
-        (parentClasses[2].mobile.textALIGN = 'left');
-      parentClasses[2].mobile.textWRAP = 'pretty';
-      parentClasses[2].mobile.maxW = '3xl';
-      if (bordered) {
-        parentClasses[2].mobile.shadow = 'lg';
-        parentClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-      break;
-    }
-
-    default: {
-      (title = !bordered ? 'Intro section' : 'Intro section with border'),
-        (slug = !bordered ? 'intro-default' : 'intro-default-bordered'),
-        (parentClasses[2].mobile.textALIGN = 'left');
-      parentClasses[2].mobile.textWRAP = 'pretty';
-      if (bordered) {
-        parentClasses[2].mobile.shadow = 'lg';
-        parentClasses[2].mobile.bgCOLOR = getColor(
-          {
-            light: useOdd ? 'brand-2' : 'white',
-            'light-bw': useOdd ? 'white' : 'brand-2',
-            'light-bold': useOdd ? 'brand-2' : 'white',
-            dark: useOdd ? 'black' : 'brand-1',
-            'dark-bw': useOdd ? 'black' : 'brand-1',
-            'dark-bold': useOdd ? 'brand-1' : 'black',
-          },
-          theme
-        );
-      }
-    }
-  }
-
-  return {
-    nodeType: 'Pane',
-    id: '',
-    parentId: '',
-    isDecorative: false,
-    title,
-    slug,
-    bgColour: tailwindToHex(
-      getColor(
-        {
-          light: !useOdd ? 'brand-2' : 'white',
-          'light-bw': !useOdd ? 'white' : 'brand-2',
-          'light-bold': !useOdd ? 'brand-2' : 'white',
-          dark: !useOdd ? 'black' : 'brand-1',
-          'dark-bw': !useOdd ? 'black' : 'brand-1',
-          'dark-bold': !useOdd ? 'brand-1' : 'black',
-        },
-        theme
-      ),
-      brand
-    ),
-    markdown: {
-      nodeType: 'Markdown',
-      id: '',
-      parentId: '',
-      type: 'markdown',
-      markdownId: ulid(),
-      defaultClasses: getBaseIntroClasses(theme),
-      parentClasses,
-      markdownBody: defaultIntroBody,
-    },
-  };
-};
-
-export const getImageHeroSectionDefault = (
-  theme: Theme,
-  brand: string,
-  useOdd: boolean = false,
-  bordered: boolean = false
-): TemplatePane => {
-  const parentClasses = getImageHeroBaseParentClasses();
-  parentClasses[2].mobile.textALIGN = 'left';
-  parentClasses[2].mobile.textWRAP = 'pretty';
-  if (bordered) {
-    parentClasses[2].mobile.shadow = 'lg';
-    parentClasses[2].mobile.bgCOLOR = getColor(
-      {
-        light: useOdd ? 'brand-2' : 'white',
-        'light-bw': useOdd ? 'white' : 'brand-2',
-        'light-bold': useOdd ? 'brand-2' : 'white',
-        dark: useOdd ? 'black' : 'brand-1',
-        'dark-bw': useOdd ? 'black' : 'brand-1',
-        'dark-bold': useOdd ? 'brand-1' : 'black',
-      },
-      theme
-    );
-  }
-
-  return {
-    nodeType: 'Pane',
-    id: '',
-    parentId: '',
-    isDecorative: false,
-    title: !bordered ? 'Hero Image section' : 'Hero Image section with border',
-    slug: 'intro-default',
-    bgColour: tailwindToHex(
-      getColor(
-        {
-          light: !useOdd ? 'brand-2' : 'white',
-          'light-bw': !useOdd ? 'white' : 'brand-2',
-          'light-bold': !useOdd ? 'brand-2' : 'white',
-          dark: !useOdd ? 'black' : 'brand-1',
-          'dark-bw': !useOdd ? 'black' : 'brand-1',
-          'dark-bold': !useOdd ? 'brand-1' : 'black',
-        },
-        theme
-      ),
-      brand
-    ),
-    markdown: {
-      nodeType: 'Markdown',
-      id: '',
-      parentId: '',
-      type: 'markdown',
-      markdownId: ulid(),
-      defaultClasses: getBaseImageHeroClasses(theme),
-      parentClasses,
-      markdownBody: defaultImageHeroBody,
-    },
-  };
-};
-
-const getBaseImageHeroClasses = (theme: Theme) => ({
-  h2: {
-    mobile: {
-      fontWEIGHT: 'bold',
-      textCOLOR: getColor(
-        {
-          light: 'brand-7',
-          'light-bw': 'brand-1',
-          'light-bold': 'brand-5',
-          dark: 'brand-4',
-          'dark-bw': 'brand-8',
-          'dark-bold': 'brand-3',
-        },
-        theme
-      ),
-      textSIZE: '3xl',
-      lineHEIGHT: 'snug',
-      fontFACE: 'action',
-      mb: '4',
-      maxW: '2xl',
-    },
-    tablet: {
-      textSIZE: '4xl',
-      mb: '6',
-    },
-    desktop: {
-      textSIZE: '5xl',
-      mb: '8',
-    },
-  },
-  p: {
-    mobile: {
-      textCOLOR: getColor(
-        {
-          light: 'brand-7',
-          'light-bw': 'brand-1',
-          'light-bold': 'brand-7',
-          dark: 'brand-8',
-          'dark-bw': 'brand-2',
-          'dark-bold': 'brand-8',
-        },
-        theme
-      ),
-      textSIZE: 'lg',
-      lineHEIGHT: 'relaxed',
-      maxW: 'xl',
-      py: '1.5',
-    },
-    tablet: {
-      textSIZE: 'xl',
-      py: '2.5',
-    },
-    desktop: {
-      maxW: '2xl',
-      mb: '10',
-    },
-  },
-  li: {
-    mobile: {
-      fontWEIGHT: 'bold',
-      textCOLOR: getColor(
-        {
-          light: 'brand-7',
-          'light-bw': 'brand-1',
-          'light-bold': 'brand-5',
-          dark: 'brand-4',
-          'dark-bw': 'brand-8',
-          'dark-bold': 'brand-3',
-        },
-        theme
-      ),
-      textSIZE: '3xl',
-      lineHEIGHT: 'snug',
-      fontFACE: 'action',
-    },
-    tablet: {
-      textSIZE: '4xl',
-    },
-    desktop: {
-      textSIZE: '5xl',
-    },
-  },
-  img: {
-    mobile: {
-      objectFIT: 'cover',
-      mx: 'auto',
-    },
-    tablet: {
-      maxH: 'none',
-      h: 'full',
-    },
-    desktop: {
-      w: '1/2',
-      borderL: '8',
-      borderCOLOR: 'brand-3',
-    },
-  },
-});
-
-const getImageHeroBaseParentClasses = (): ParentClassesPayload => [
-  ...getIntroBaseParentClasses(),
-  {
-    mobile: {
-      display: 'flex',
-      flexDIRECTION: 'col',
-      gap: '8',
-      p: '6',
-    },
-    tablet: {
-      p: '12',
-      gap: '12',
-    },
-    desktop: {
-      flexDIRECTION: 'row',
-      items: 'center',
-      justify: 'between',
-      gap: '0',
-      overflow: 'hidden',
-      p: '0',
-    },
-  },
-];