From 8debef33ae5db78eaecd36824c7383ce7fb4a4dd Mon Sep 17 00:00:00 2001
From: George Oastler <goastler4@gmail.com>
Date: Tue, 1 Oct 2024 14:46:39 +0100
Subject: [PATCH 1/2] specify font family and font color in theme for
 procaptcha

---
 .../procaptcha-pow/src/components/ProcaptchaWidget.tsx    | 1 +
 .../procaptcha-react/src/components/ProcaptchaWidget.tsx  | 1 +
 packages/web-components/src/CaptchaPlaceholder.tsx        | 1 +
 packages/web-components/src/theme.ts                      | 8 ++++++++
 4 files changed, 11 insertions(+)

diff --git a/packages/procaptcha-pow/src/components/ProcaptchaWidget.tsx b/packages/procaptcha-pow/src/components/ProcaptchaWidget.tsx
index 19aca13276..8c966b1182 100644
--- a/packages/procaptcha-pow/src/components/ProcaptchaWidget.tsx
+++ b/packages/procaptcha-pow/src/components/ProcaptchaWidget.tsx
@@ -76,6 +76,7 @@ const Procaptcha = (props: ProcaptchaProps) => {
 					maxWidth: WIDGET_MAX_WIDTH,
 					maxHeight: "100%",
 					overflowX: "auto",
+					...theme.font,
 				}}
 			>
 				<ContainerDiv>
diff --git a/packages/procaptcha-react/src/components/ProcaptchaWidget.tsx b/packages/procaptcha-react/src/components/ProcaptchaWidget.tsx
index ea19f3120c..c7973ff439 100644
--- a/packages/procaptcha-react/src/components/ProcaptchaWidget.tsx
+++ b/packages/procaptcha-react/src/components/ProcaptchaWidget.tsx
@@ -61,6 +61,7 @@ const ProcaptchaWidget = (props: ProcaptchaProps) => {
 					maxWidth: WIDGET_MAX_WIDTH,
 					maxHeight: "100%",
 					overflowX: "auto",
+					...theme.font,
 				}}
 			>
 				<Modal show={state.showModal}>
diff --git a/packages/web-components/src/CaptchaPlaceholder.tsx b/packages/web-components/src/CaptchaPlaceholder.tsx
index 60e2b68bc7..16cf3edab0 100644
--- a/packages/web-components/src/CaptchaPlaceholder.tsx
+++ b/packages/web-components/src/CaptchaPlaceholder.tsx
@@ -42,6 +42,7 @@ export const ProcaptchaPlaceholder = ({
 					maxWidth: WIDGET_MAX_WIDTH,
 					maxHeight: "100%",
 					overflowX: "auto",
+					...theme.font,
 				}}
 			>
 				<ContainerDiv>
diff --git a/packages/web-components/src/theme.ts b/packages/web-components/src/theme.ts
index 7607b25162..88ce5d8d9b 100644
--- a/packages/web-components/src/theme.ts
+++ b/packages/web-components/src/theme.ts
@@ -48,6 +48,10 @@ export const lightTheme = {
 		unit: DEFAULT_SPACING,
 		half: Math.floor(DEFAULT_SPACING / 2),
 	},
+	font: {
+		fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+		color: "#000",
+	}
 };
 
 export const darkTheme = {
@@ -70,4 +74,8 @@ export const darkTheme = {
 		unit: DEFAULT_SPACING,
 		half: Math.floor(DEFAULT_SPACING / 2),
 	},
+	font: {
+		fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+		color: "#fff",
+	}
 };

From d4bfbd5dc9c1d8954548ca95acc39d0dbf04cb1e Mon Sep 17 00:00:00 2001
From: George Oastler <goastler4@gmail.com>
Date: Wed, 8 Jan 2025 14:06:56 +0000
Subject: [PATCH 2/2] lint

---
 packages/web-components/src/theme.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/web-components/src/theme.ts b/packages/web-components/src/theme.ts
index 88ce5d8d9b..f67ed4eb34 100644
--- a/packages/web-components/src/theme.ts
+++ b/packages/web-components/src/theme.ts
@@ -49,9 +49,10 @@ export const lightTheme = {
 		half: Math.floor(DEFAULT_SPACING / 2),
 	},
 	font: {
-		fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+		fontFamily:
+			'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
 		color: "#000",
-	}
+	},
 };
 
 export const darkTheme = {
@@ -75,7 +76,8 @@ export const darkTheme = {
 		half: Math.floor(DEFAULT_SPACING / 2),
 	},
 	font: {
-		fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+		fontFamily:
+			'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
 		color: "#fff",
-	}
+	},
 };