From a039149a35acafe461a8b47956bfbb77d606edef Mon Sep 17 00:00:00 2001
From: Mihai Daniel Eremia <22687907+mihaieremia@users.noreply.github.com>
Date: Sat, 31 Aug 2024 18:56:53 +0300
Subject: [PATCH] add mix blend mode

---
 src/email/utils.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/email/utils.tsx b/src/email/utils.tsx
index a477f7c..5f50d64 100644
--- a/src/email/utils.tsx
+++ b/src/email/utils.tsx
@@ -226,6 +226,7 @@ export function Center({ children }: PropsWithChildren) {
 export const headingStyle = {
   color: 'var(--color-palettes-primary-text-fill, #FFF) !important',
   fontFamily: `Heading, ${fallbackFont}`,
+  mixBlendMode: 'screen',
   textAlign: 'center',
   fontSize: '28px',
   fontStyle: 'normal',
@@ -236,6 +237,7 @@ export const headingStyle = {
 export const smallHeadingStyle = {
   color: 'var(--color-palettes-primary-text-fill, #FFF) !important',
   fontFamily: `Button, ${fallbackFont}`,
+  mixBlendMode: 'screen',
   textAlign: 'center',
   fontSize: '19px',
   fontStyle: 'normal',
@@ -246,6 +248,7 @@ export const smallHeadingStyle = {
 export const linkStyle = {
   color: 'var(--color-palettes-lime-fill, #AEFB4F) !important',
   fontFamily: `Body, ${fallbackFont}`,
+  mixBlendMode: 'screen',
   fontSize: '16px',
   fontStyle: 'normal',
   fontWeight: '500',
@@ -256,6 +259,7 @@ export const linkStyle = {
 export const bodyStyle = {
   color: 'var(--color-palettes-button-tertiary-text, #D0D0D0) !important',
   textAlign: 'center',
+  mixBlendMode: 'screen',
   fontFamily: `Body, ${fallbackFont}`,
   fontSize: '16px',
   fontStyle: 'normal',
@@ -267,6 +271,7 @@ export const hintStyle = {
   color: 'var(--color-palettes-button-tertiary-text, #D0D0D0) !important',
   textAlign: 'center',
   fontFamily: `Body, ${fallbackFont}`,
+  mixBlendMode: 'screen',
   fontSize: '14px',
   fontStyle: 'normal',
   fontWeight: '300',
@@ -276,6 +281,7 @@ export const hintStyle = {
 export const highlightStyle = {
   color: 'var(--color-palettes-primary-text-fill, #FFF) !important',
   fontFamily: `Body, ${fallbackFont}`,
+  mixBlendMode: 'screen',
   fontSize: '16px',
   fontStyle: 'normal',
   fontWeight: '500',
@@ -286,6 +292,7 @@ export const buttonStyle = {
   fontFamily: `Button, ${fallbackFont}`,
   padding: '12px 20px',
   borderRadius: '8px',
+  mixBlendMode: 'screen',
   background: 'var(--color-palettes-button-primary-fill, #AEFB4F) !important',
   color: 'var(--color-palettes-button-primary-text, #000) !important',
   fontSize: '14px',