add mix blend mode

XOXNO · Aug 31, 2024 · a039149 · a039149
1 parent 350fa8f
commit a039149
Showing 1 changed file with 7 additions and 0 deletions.
diff --git 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',