From e330d7baed3175211cdd15e98e77a2caaa139cd4 Mon Sep 17 00:00:00 2001
From: Femke Reunes <femke.reunes@studiohyperdrive.be>
Date: Tue, 14 Jul 2026 15:25:01 +0200
Subject: [PATCH] feat (Block background colors): Add requested tertiary
 background colors

---
 ui/package-lock.json                          |  8 +--
 ui/package.json                               |  2 +-
 .../content-page/const/get-color-options.ts   | 50 +++++++++++++++++++
 .../content-page/types/content-block.types.ts | 12 +++++
 4 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index dc4e1ec8a..85eff9959 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -76,7 +76,7 @@
         "@emotion/react": "11.14.0",
         "@floating-ui/react": "0.27.18",
         "@hookform/resolvers": "2.9.11",
-        "@meemoo/react-components": "6.0.5",
+        "@meemoo/react-components": "6.0.6",
         "@studiohyperdrive/pagination": "1.0.0",
         "@tanstack/react-query": "5.99.0",
         "@viaa/avo2-components": "7.0.0",
@@ -2475,9 +2475,9 @@
       "license": "MIT"
     },
     "node_modules/@meemoo/react-components": {
-      "version": "6.0.5",
-      "resolved": "http://do-prd-mvn-01.do.viaa.be:8081/repository/npm-viaa/@meemoo/react-components/-/react-components-6.0.5.tgz",
-      "integrity": "sha512-ie5CxNGKypOmL+Tbwg0dwuieEJMnv0P2kennoKBYtK5CMUrsR6dFDN7PwTLH1AbbuCPL3TjUC/0kKQ9w0K7axg==",
+      "version": "6.0.6",
+      "resolved": "http://do-prd-mvn-01.do.viaa.be:8081/repository/npm-viaa/@meemoo/react-components/-/react-components-6.0.6.tgz",
+      "integrity": "sha512-lpDYZr0aa4mCqUXmL5uNMMWpI7ctmO6iMxKdCDyleNvr5wBfMEYsASpidpE3dKx8dxYcibyBUnfscBL7lCrUfw==",
       "peer": true,
       "dependencies": {
         "use-sync-external-store": "1.4.0"
diff --git a/ui/package.json b/ui/package.json
index 65b1bdd97..91839083b 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -74,7 +74,7 @@
     "@emotion/react": "11.14.0",
     "@floating-ui/react": "0.27.18",
     "@hookform/resolvers": "2.9.11",
-    "@meemoo/react-components": "6.0.5",
+    "@meemoo/react-components": "6.0.6",
     "@studiohyperdrive/pagination": "1.0.0",
     "@tanstack/react-query": "5.99.0",
     "@viaa/avo2-components": "7.0.0",
diff --git a/ui/src/react-admin/modules/content-page/const/get-color-options.ts b/ui/src/react-admin/modules/content-page/const/get-color-options.ts
index 991dd9280..d63483f47 100644
--- a/ui/src/react-admin/modules/content-page/const/get-color-options.ts
+++ b/ui/src/react-admin/modules/content-page/const/get-color-options.ts
@@ -76,6 +76,46 @@ const blackWhiteGradientOption = () => ({
 	]),
 	value: GradientColor.BlackWhite,
 });
+const oldPinkOption = () => ({
+	label: tText('modules/content-page/const/content-block___oud-roze', {}, [App.HET_ARCHIEF]),
+	value: Color.OldPink,
+});
+const lavenderOption = () => ({
+	label: tText('modules/content-page/const/content-block___lavendel', {}, [App.HET_ARCHIEF]),
+	value: Color.Lavender,
+});
+const lilaOption = () => ({
+	label: tText('modules/content-page/const/content-block___lila', {}, [App.HET_ARCHIEF]),
+	value: Color.Lila,
+});
+const blossomPinkOption = () => ({
+	label: tText('modules/content-page/const/content-block___bloesem-roze', {}, [App.HET_ARCHIEF]),
+	value: Color.BlossomPink,
+});
+const coralOption = () => ({
+	label: tText('modules/content-page/const/content-block___koraal-oranje', {}, [App.HET_ARCHIEF]),
+	value: Color.Coral,
+});
+const lightBlueOption = () => ({
+	label: tText('modules/content-page/const/content-block___poederblauw', {}, [App.HET_ARCHIEF]),
+	value: Color.LightBlue,
+});
+const sageOption = () => ({
+	label: tText('modules/content-page/const/content-block___salie-groen', {}, [App.HET_ARCHIEF]),
+	value: Color.Sage,
+});
+const pistachioOption = () => ({
+	label: tText('modules/content-page/const/content-block___pistache-groen', {}, [App.HET_ARCHIEF]),
+	value: Color.Pistachio,
+});
+const sandBeigeOption = () => ({
+	label: tText('modules/content-page/const/content-block___zand-beige', {}, [App.HET_ARCHIEF]),
+	value: Color.SandBeige,
+});
+const mustardOption = () => ({
+	label: tText('modules/content-page/const/content-block___honing-geel', {}, [App.HET_ARCHIEF]),
+	value: Color.Mustard,
+});
 
 //
 export const GET_BACKGROUND_COLOR_OPTIONS_AVO: () => SelectOption<Color>[] = () => [
@@ -102,6 +142,16 @@ export const GET_BACKGROUND_COLOR_OPTIONS_ARCHIEF: () => SelectOption<
 	skyBlueOption(),
 	meemooLogoOption(),
 	blackWhiteGradientOption(),
+	oldPinkOption(),
+	lavenderOption(),
+	lilaOption(),
+	blossomPinkOption(),
+	coralOption(),
+	lightBlueOption(),
+	sageOption(),
+	pistachioOption(),
+	sandBeigeOption(),
+	mustardOption(),
 ];
 
 export const GET_AVO_HERO_BACKGROUND_COLOR_OPTIONS: () => SelectOption<Color>[] = () => [
diff --git a/ui/src/react-admin/modules/content-page/types/content-block.types.ts b/ui/src/react-admin/modules/content-page/types/content-block.types.ts
index 50a1b098e..c6e6dd3f7 100644
--- a/ui/src/react-admin/modules/content-page/types/content-block.types.ts
+++ b/ui/src/react-admin/modules/content-page/types/content-block.types.ts
@@ -94,6 +94,18 @@ export enum Color {
 	Zinc = '#ADADAD',
 	SkyBlue = '#C3DDE6',
 	Juniper = '#678588',
+
+	// Tertiary colors
+	OldPink = '#9B6072',
+	Lavender = '#A293AF',
+	Lila = '#c6c2e0',
+	BlossomPink = '#E694B3',
+	Coral = '#E89B88',
+	LightBlue = '#BDDEE7',
+	Sage = '#91A9A7',
+	Pistachio = '#B8BE9A',
+	SandBeige = '#EDD6C4',
+	Mustard = '#EFCA6A',
 }
 
 export enum GradientColor {