mailer/templates/styles/base.tsx

import type { JSX } from 'preact'

export const rootCss = {
	accentColor: '#48D200',
	backgroundColor: '#F2E6DC',
} satisfies JSX.CSSProperties

export const bodyCss: JSX.CSSProperties = {
	fontFamily: 'system-ui, "Trebuchet MS", sans-serif',
	accentColor: rootCss.accentColor,
	backgroundColor: rootCss.backgroundColor,
	padding: '0.5rem 0',
}

export const messageCss: JSX.CSSProperties = {
	padding: '1rem',
	borderRadius: '0.4rem',
	backgroundColor: 'white',
	textWrap: 'balance',
}

export const headingCss: JSX.CSSProperties = {
	fontFamily: 'Garamond, serif',
	color: rootCss.accentColor,
	textAlign: 'center',
	margin: '-1rem 0 3rem',
	fontSize: '2.5rem',
}

export const textCss: JSX.CSSProperties = {
	fontSize: '1rem',
}

export const buttonCss: JSX.CSSProperties = {
	color: 'white',
	padding: '1rem',
	borderRadius: '0.4rem',
	fontSize: '1.2rem',
	backgroundColor: rootCss.accentColor,
}

export const rawCss = `
	a {
		color: ${rootCss.accentColor}; 
	}

	h1 {
		color: ${rootCss.accentColor};
	}
`

export function BaseStyle() {
	return <style dangerouslySetInnerHTML={{ __html: rawCss }}></style>
}