How to use the @guardian/src-foundations.palette.background function in @guardian/src-foundations

radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.primary,
		supportingTextColor: palette.text.secondary,
		errorColor: palette.border.error,
	},
	...inlineErrorLightTheme,
}

export const blueTheme: { radio: RadioTheme; inlineError: InlineErrorTheme } = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.brand.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.brand.primary,
		supportingTextColor: palette.text.brand.secondary,
		errorColor: palette.border.brand.error,
	},
	...inlineErrorBlueTheme,
}

@supports (appearance: none) {
		/* overall positional properties */
		position: absolute;
		top: 15px;
		left: 9px;
		width: 6px;
		height: 12px;
		transform: rotate(45deg);
		z-index: 5;

		/* the checkmark ✓ */
		&:after,
		&:before {
			position: absolute;
			display: block;
			background-color: ${palette.background.checkboxChecked};
			transition: all ${transitions.short} ease-in-out;
			content: "";
		}

		/* the short side */
		&:before {
			height: 2px;
			bottom: 0;
			left: 0;
			right: 100%;
			transition-delay: 0.05s;
		}

		/* the long side */
		&:after {
			bottom: 0;

hoverBorderColor: string
	color: string
	checkedColor: string
	textColor: string
	supportingTextColor: string
	errorColor: string
}

export const lightTheme: {
	radio: RadioTheme
	inlineError: InlineErrorTheme
} = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.primary,
		supportingTextColor: palette.text.secondary,
		errorColor: palette.border.error,
	},
	...inlineErrorLightTheme,
}

export const blueTheme: { radio: RadioTheme; inlineError: InlineErrorTheme } = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.brand.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.brand.primary,
		supportingTextColor: palette.text.brand.secondary,
		errorColor: palette.border.brand.error,
	},

import { Priority } from "./index"

export type ButtonTheme = {
	[key in Priority]: {
		backgroundColor?: string
		color?: string
		hoverBackgroundColor?: string
		borderColor?: string
	}
}

export const lightTheme: { button: ButtonTheme } = {
	button: {
		primary: {
			color: palette.text.ctaPrimary,
			backgroundColor: palette.background.ctaPrimary,
			hoverBackgroundColor: palette.background.ctaPrimaryHover,
		},
		secondary: {
			color: palette.text.ctaSecondary,
			backgroundColor: palette.background.ctaSecondary,
			hoverBackgroundColor: palette.background.ctaSecondaryHover,
		},
		tertiary: {
			color: palette.text.ctaSecondary,
			backgroundColor: palette.background.primary,
		},
	},
}

export const darkTheme: { button: ButtonTheme } = {
	button: {

} from "@guardian/src-inline-error"

export type TextInputTheme = {
	inputColor: string
	textColor: string
	backgroundColor: string
}

export const lightTheme: {
	textInput: TextInputTheme
	inlineError: InlineErrorTheme
} = {
	textInput: {
		inputColor: palette.text.primary,
		textColor: palette.text.primary,
		backgroundColor: palette.background.primary,
	},
	...inlineErrorLightTheme,
}

backgroundColor: palette.background.brandYellow.primary,
		},
	},
}

export const rrBlueTheme: { button: ButtonTheme } = {
	button: {
		primary: {
			color: palette.text.readerRevenue.ctaPrimary,
			backgroundColor: palette.background.readerRevenue.ctaPrimary,
			hoverBackgroundColor:
				palette.background.readerRevenue.ctaPrimaryHover,
		},
		secondary: {
			color: palette.text.readerRevenue.ctaSecondary,
			backgroundColor: palette.background.readerRevenue.ctaSecondary,
			hoverBackgroundColor:
				palette.background.readerRevenue.ctaSecondaryHover,
			borderColor: palette.border.readerRevenue.ctaSecondary,
		},
		tertiary: {},
	},
}

export const rrYellowTheme: { button: ButtonTheme } = {
	button: {
		primary: {
			color: palette.text.readerRevenueYellow.ctaPrimary,
			backgroundColor: palette.background.readerRevenueYellow.ctaPrimary,
			hoverBackgroundColor:
				palette.background.readerRevenueYellow.ctaPrimaryHover,
		},