feat: page category selector and css accent variables

cms/src/api/page/content-types/page/lifecycles.ts

@@ -163,6 +163,7 @@ interface Page {
   title: string
   slug: string
   locale?: string
+  category?: 'default' | 'tech' | 'mission' | 'vision' | 'values'
   hero?: Hero
   seo?: Seo
   content?: ContentBlock[]
@@ -548,6 +549,11 @@ function generateMDX(page: Page): string {
     }
   }
 
+  // Add category for theming
+  if (page.category) {
+    frontmatterLines.push(`category: "${page.category}"`)
+  }
+
   // Add locale and contentId for localized pages
   if (isLocalized) {
     frontmatterLines.push(`locale: "${locale}"`)

cms/src/api/page/content-types/page/schema.json

@@ -52,6 +52,16 @@
         "blocks.ambassadors-grid",
         "blocks.blockquote"
       ]
+    },
+    "category": {
+      "type": "enumeration",
+      "enum": ["default", "tech", "mission", "vision", "values"],
+      "default": "default",
+      "pluginOptions": {
+        "i18n": {
+          "localized": false
+        }
+      }
     }
   }
 }

cms/types/generated/contentTypes.d.ts

@@ -606,6 +606,15 @@ export interface ApiPagePage extends Struct.CollectionTypeSchema {
     }
   }
   attributes: {
+    category: Schema.Attribute.Enumeration<
+      ['default', 'tech', 'mission', 'vision', 'values']
+    > &
+      Schema.Attribute.SetPluginOptions<{
+        i18n: {
+          localized: false
+        }
+      }> &
+      Schema.Attribute.DefaultTo<'default'>
     content: Schema.Attribute.DynamicZone<
       [
         'blocks.paragraph',

src/components/blockquote/Blockquote.astro

@@ -39,7 +39,7 @@ if (
 const formattedQuote = `“${trimmedQuote.trim()}”`
 ---
 
-<div class="ps-space-s py-space-2xs border-l-4 border-primary mb-space-s">
+<div class="ps-space-s py-space-2xs border-l-4 border-(--accent-color) mb-space-s">
   <blockquote class="text-step-1">
     <p>{formattedQuote}</p>
   </blockquote>

src/pages/[...page].astro

@@ -18,12 +18,13 @@ export async function getStaticPaths() {
 const { page } = Astro.props
 const { Content } = await render(page)
 
-const { title, heroTitle, heroDescription, description } = page.data
+const { title, heroTitle, heroDescription, description, category } = page.data
 const pageTitle = title || page.data.slug
+const pageCategory = category || 'default'
 ---
 
 <BaseLayout title={pageTitle} description={description}>
-  <main class="pb-space-l">
+  <main class="pb-space-l" data-category={pageCategory}>
     {
       heroTitle && (
         <section class="bg-gradient-primary bg-no-repeat bg-cover bg-[position:bottom_right] min-h-[40vh] py-space-xl text-white flex items-center">

src/styles/tailwind.css

@@ -138,6 +138,8 @@
     --color-header-accent: #eee;
     --color-table-stripe: #f6f7f9;
     --color-bg-inline-code: #edeef3;
+    /* Accent color for themed elements (blockquotes, etc.) */
+    --accent-color: var(--color-primary);
     --option1: linear-gradient(
       to bottom,
       hsla(162, 86%, 12%, 1),
@@ -150,6 +152,23 @@
     --color-text: var(--color-white);
   }
 
+  /* Category-based theming */
+  [data-category='tech'] {
+    --accent-color: oklch(51.54% 0.088 194.77); /* Using primary for now */
+  }
+
+  [data-category='mission'] {
+    --accent-color: oklch(55.27% 0.205 32.62); /* Using mission color */
+  }
+
+  [data-category='vision'] {
+    --accent-color: oklch(51.54% 0.088 194.77); /* Using primary for now */
+  }
+
+  [data-category='values'] {
+    --accent-color: oklch(51.54% 0.088 194.77); /* Using primary for now */
+  }
+
   main {
     @apply flex-1 text-step-0;
   }