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

export type RadioTheme = {
	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,

} = {
	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,
}

export const textInput = ({
	textInput,
}: { textInput: TextInputTheme } = textInputLight) => css`
	height: ${size.large}px;
	${textSans.medium()};
	color: ${textInput.textInput};
	background-color: ${textInput.backgroundInput};
	border: 2px solid ${palette.border.textInput};
	padding: 0 ${space[2]}px;

	&:focus {
		${focusHalo};
	}
`

box-sizing: border-box;
	display: inline-block;
	cursor: pointer;
	width: ${size.small}px;
	height: ${size.small}px;
	margin: 0 ${space[1]}px 0 0;

	border: 2px solid currentColor;
	position: relative;
	transition: box-shadow ${transitions.short};
	transition-delay: 0.08s;

	color: ${palette.border.checkbox};

	&:checked {
		border: 2px solid ${palette.border.checkboxChecked};

		& ~ span:before {
			right: 0;
		}
		& ~ span:after {
			top: 0;
		}
	}

	&:focus {
		${focusHalo};
	}

	/*
	Take care: Emotion extracts @supports blocks and moves them below
	all other <style> elements, making these values hard to override.</style>

const gridItem = ({
	breakpoints,
	spans,
	startingPositions,
}: {
	breakpoints: GridBreakpoint[]
	spans: number[]
	startingPositions: number[]
}) => css`
	${gridItemSpans({ breakpoints, spans })}
	${gridItemStartingPos({ breakpoints, startingPositions })}
`

const borderRightStyle = css`
	border-right: 1px solid ${palette.border.secondary};
	padding-right: ${GUTTER_WIDTH / 2}px;
	margin-right: ${-GUTTER_WIDTH / 2}px;
`

export {
	gridRow,
	gridRowMobile,
	gridRowTablet,
	gridRowDesktop,
	gridRowWide,
	gridItem,
	GridBreakpoint,
	borderRightStyle,
}

`

export const width4 = css`
	width: 4ch;
`

export const text = ({
	textInput,
}: { textInput: TextInputTheme } = textInputLight) => css`
	${textSans.medium()};
	color: ${textInput.textLabel};
	margin-bottom: ${space[1]}px;
`

export const errorInput = css`
	border: 4px solid ${palette.border.error};
	color: ${palette.error.main};
`

export const optionalLabel = css`
	${textSans.small()};
	color: ${palette.text.secondary};
	font-style: italic;
`

export const supportingText = css`
	${textSans.small()};
	color: ${palette.text.secondary};
	margin-bottom: ${space[1]}px;
`

display: flex;
	justify-content: flex-start;
	flex-direction: column;
	border: 0;
`

export const label = css`
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	min-height: ${size.large}px;

	&:hover {
		input {
			border-color: ${palette.border.checkboxHover};
		}
	}
`

export const labelWithSupportingText = css`
	align-items: flex-start;
	margin-bottom: ${space[3]}px;
`

export const checkbox = css`
	flex: 0 0 auto;
	box-sizing: border-box;
	display: inline-block;
	cursor: pointer;
	width: ${size.small}px;
	height: ${size.small}px;

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

}

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,
		},
		secondary: {
			color: palette.text.readerRevenueYellow.ctaSecondary,
			backgroundColor: