Deprecate old themes and add new ones to index.js

libs/@guardian/source-react-components/src/accordion/theme.ts

@@ -22,6 +22,8 @@ export type ThemeAccordion = {
 	label: string;
 	ctaText: string;
 };
+
+/** @deprecated Use `themeAccordion` and component `theme` prop instead of emotion's `ThemeProvider` */
 export const accordionThemeDefault = {
 	accordion: {
 		textPrimary: palette.neutral[7],

libs/@guardian/source-react-components/src/button/theme-reader-revenue.ts

@@ -70,17 +70,17 @@ export const themeButtonReaderRevenueBrandAlt: Partial<ThemeButton> = {
 	borderTertiary: border.readerRevenueBrandAlt.ctaTertiary,
 };
 
-/** @deprecated Use `buttonReaderRevenueTheme` and component `theme` prop instead of emotion's `ThemeProvider` */
+/** @deprecated Use `themeButtonReaderRevenue` and component `theme` prop instead of emotion's `ThemeProvider` */
 export const buttonThemeReaderRevenue: { button: Partial<ButtonTheme> } = {
 	button: themeButtonReaderRevenue,
 };
-/** @deprecated Use `buttonReaderRevenueBrandTheme` and component `theme` prop instead of emotion's `ThemeProvider` */
 
+/** @deprecated Use `themeButtonReaderRevenueBrand` and component `theme` prop instead of emotion's `ThemeProvider` */
 export const buttonThemeReaderRevenueBrand: { button: Partial<ButtonTheme> } = {
 	button: themeButtonReaderRevenueBrand,
 };
-/** @deprecated Use `buttonReaderRevenueBrandAltTheme` and component `theme` prop instead of emotion's `ThemeProvider` */
 
+/** @deprecated Use `themeButtonReaderRevenueBrandAlt` and component `theme` prop instead of emotion's `ThemeProvider` */
 export const buttonThemeReaderRevenueBrandAlt: {
 	button: Partial<ButtonTheme>;
 } = {

libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.stories.tsx

@@ -131,8 +131,8 @@ export const ErrorCustomTheme: StoryFn<typeof CheckboxGroup> = Template.bind(
 );
 ErrorCustomTheme.args = {
 	theme: {
-		label: { textLabel: palette.sport[400] },
-		userFeedback: { textError: palette.sport[400] },
+		textLabel: palette.sport[400],
+		textError: palette.sport[400],
 	},
 	error: 'This newsletter is not available in your region',
 };

libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.tsx

@@ -69,15 +69,15 @@ export const CheckboxGroup = ({
 			supporting={supporting}
 			hideLabel={hideLabel}
 			optional={optional}
-			theme={theme?.label}
+			theme={theme}
 		/>
 	) : (
 		''
 	);
 
 	const message =
 		typeof error === 'string' ? (
-			<InlineError theme={theme?.userFeedback} id={descriptionId(groupId)}>
+			<InlineError theme={theme} id={descriptionId(groupId)}>
 				{error}
 			</InlineError>
 		) : (

libs/@guardian/source-react-components/src/checkbox/theme.ts

@@ -1,10 +1,9 @@
 import { palette } from '@guardian/source-foundations';
 import type { Theme } from '../@types/Theme';
 import type { ThemeLabel } from '../label/theme';
-import { labelThemeBrand, labelThemeDefault, themeLabel } from '../label/theme';
+import { labelThemeBrand, labelThemeDefault } from '../label/theme';
 import type { ThemeUserFeedback } from '../user-feedback/theme';
 import {
-	themeUserFeedback,
 	userFeedbackThemeBrand,
 	userFeedbackThemeDefault,
 } from '../user-feedback/theme';
@@ -21,12 +20,9 @@ export type ThemeCheckbox = {
 	textIndeterminate: string;
 };
 
-export type ThemeCheckboxGroup = {
-	label: Partial<ThemeLabel>;
-	userFeedback: Partial<ThemeUserFeedback>;
-};
+export type ThemeCheckboxGroup = ThemeLabel & ThemeUserFeedback;
 
-/** @deprecated Use `checkboxTheme` and component `theme` prop instead of emotion's `ThemeProvider` */
+/** @deprecated Use `themeCheckbox` and component `theme` prop instead of emotion's `ThemeProvider` */
 export const checkboxThemeDefault = {
 	checkbox: {
 		border: palette.neutral[46],
@@ -41,7 +37,7 @@ export const checkboxThemeDefault = {
 	...userFeedbackThemeDefault,
 	...labelThemeDefault,
 };
-/** @deprecated Use `checkboxBrandTheme` and component `theme` prop instead of emotion's `ThemeProvider` */
+/** @deprecated Use `themeCheckboxBrand` and component `theme` prop instead of emotion's `ThemeProvider` */
 export const checkboxThemeBrand = {
 	checkbox: {
 		border: palette.brand[800],
@@ -57,11 +53,6 @@ export const checkboxThemeBrand = {
 	...labelThemeBrand,
 };
 
-export const themeCheckboxGroup = {
-	label: themeLabel,
-	userFeedback: themeUserFeedback,
-};
-
 export const themeCheckbox: ThemeCheckbox = {
 	borderUnselected: palette.neutral[46],
 	borderHover: palette.brand[500],

libs/@guardian/source-react-components/src/choice-card/ChoiceCardGroup.tsx

@@ -12,6 +12,7 @@ import {
 	gridColumns,
 	gridContainer,
 } from './styles';
+import type { ThemeChoiceCardGroup } from './theme';
 
 export type ChoiceCardColumns = 2 | 3 | 4 | 5;
 
@@ -50,6 +51,7 @@ export interface ChoiceCardGroupProps
 	 */
 	columns?: ChoiceCardColumns;
 	children: JSX.Element | JSX.Element[];
+	theme?: Partial<ThemeChoiceCardGroup>;
 }
 
 /**
@@ -71,6 +73,7 @@ export const ChoiceCardGroup = ({
 	columns,
 	cssOverrides,
 	children,
+	theme,
 	...props
 }: ChoiceCardGroupProps): EmotionJSX.Element => {
 	const groupId = id ?? generateSourceId();
@@ -81,12 +84,19 @@ export const ChoiceCardGroup = ({
 	return (
 		<fieldset css={[fieldset, cssOverrides]} id={groupId} {...props}>
 			{label ? (
-				<Legend text={label} supporting={supporting} hideLabel={hideLabel} />
+				<Legend
+					text={label}
+					supporting={supporting}
+					hideLabel={hideLabel}
+					theme={theme}
+				/>
 			) : (
 				''
 			)}
 			{typeof error === 'string' && (
-				<InlineError id={descriptionId(groupId)}>{error}</InlineError>
+				<InlineError id={descriptionId(groupId)} theme={theme}>
+					{error}
+				</InlineError>
 			)}
 			<div
 				css={[

libs/@guardian/source-react-components/src/choice-card/theme.ts

@@ -1,5 +1,7 @@
 import { palette } from '@guardian/source-foundations';
 import type { Theme } from '../@types/Theme';
+import type { ThemeLabel } from '../label/theme';
+import type { ThemeUserFeedback } from '../user-feedback/theme';
 import { userFeedbackThemeDefault } from '../user-feedback/theme';
 
 export type ThemeChoiceCard = {
@@ -17,7 +19,7 @@ export type ThemeChoiceCard = {
 	backgroundTick: string;
 };
 
-/** @deprecated Use `choiceCardTheme` and component `theme` prop instead of emotion's `ThemeProvider` */
+/** @deprecated Use `themeChoiceCard` and component `theme` prop instead of emotion's `ThemeProvider` */
 export const choiceCardThemeDefault = {
 	choiceCard: {
 		textLabel: palette.neutral[46],
@@ -52,6 +54,7 @@ export const themeChoiceCard: ThemeChoiceCard = {
 	backgroundTick: palette.brand[500],
 } as const;
 
+export type ThemeChoiceCardGroup = ThemeLabel & ThemeUserFeedback;
 export const transformProviderTheme = (
 	providerTheme: Theme['choiceCard'],
 ): Partial<ThemeChoiceCard> => {

libs/@guardian/source-react-components/src/deprecated-exports.ts

@@ -36,3 +36,40 @@ export const SvgPlay = SvgMediaControlsPlay;
 
 /** @deprecated Use `SvgPayPalBrand` instead. */
 export const SvgPayPal = SvgPayPalBrand;
+
+export type { ButtonTheme } from './button/theme';
+
+export { accordionThemeDefault } from './accordion/theme';
+
+export {
+	buttonThemeReaderRevenue,
+	buttonThemeReaderRevenueBrand,
+	buttonThemeReaderRevenueBrandAlt,
+} from './button/theme-reader-revenue';
+
+export {
+	buttonThemeBrand,
+	buttonThemeBrandAlt,
+	buttonThemeDefault,
+} from './button/theme';
+
+export { checkboxThemeBrand, checkboxThemeDefault } from './checkbox/theme';
+
+export { choiceCardThemeDefault } from './choice-card/theme';
+export { labelThemeDefault, labelThemeBrand } from './label/theme';
+
+export {
+	linkThemeDefault,
+	linkThemeBrand,
+	linkThemeBrandAlt,
+} from './link/theme';
+
+export { radioThemeBrand, radioThemeDefault } from './radio/theme';
+
+export { selectThemeDefault } from './select/theme';
+export { textInputThemeDefault } from './text-input/theme';
+
+export {
+	userFeedbackThemeBrand,
+	userFeedbackThemeDefault,
+} from './user-feedback/theme';

libs/@guardian/source-react-components/src/index.ts

@@ -4,24 +4,25 @@ export type { AccordionProps } from './accordion/Accordion';
 export { Accordion } from './accordion/Accordion';
 export { AccordionRow } from './accordion/AccordionRow';
 export type { AccordionRowProps } from './accordion/AccordionRow';
-export { accordionThemeDefault } from './accordion/theme';
+export { themeAccordion } from './accordion/theme';
+export type { ThemeAccordion } from './accordion/theme';
 
 export { Button } from './button/Button';
 export { LinkButton } from './button/LinkButton';
 export type { LinkButtonProps } from './button/LinkButton';
 export {
-	buttonThemeReaderRevenue,
-	buttonThemeReaderRevenueBrand,
-	buttonThemeReaderRevenueBrandAlt,
+	themeButtonReaderRevenue,
+	themeButtonReaderRevenueBrand,
+	themeButtonReaderRevenueBrandAlt,
 } from './button/theme-reader-revenue';
 export type { ButtonProps } from './button/Button';
 export type { ButtonPriority, IconSide, Size } from './button/types';
 export {
-	buttonThemeBrand,
-	buttonThemeBrandAlt,
-	buttonThemeDefault,
+	themeButton,
+	themeButtonBrand,
+	themeButtonBrandAlt,
 } from './button/theme';
-export type { ButtonTheme } from './button/theme';
+export type { ThemeButton } from './button/theme';
 
 export { SvgGuardianLogo } from './brand/SvgGuardianLogo';
 export type { SvgGuardianLogoProps } from './brand/SvgGuardianLogo';
@@ -48,7 +49,8 @@ export { CheckboxGroup } from './checkbox/CheckboxGroup';
 export type { CheckboxGroupProps } from './checkbox/CheckboxGroup';
 export { Checkbox } from './checkbox/Checkbox';
 export type { CheckboxProps } from './checkbox/Checkbox';
-export { checkboxThemeBrand, checkboxThemeDefault } from './checkbox/theme';
+export { themeCheckbox, themeCheckboxBrand } from './checkbox/theme';
+export type { ThemeCheckbox } from './checkbox/theme';
 
 export { ChoiceCardGroup } from './choice-card/ChoiceCardGroup';
 export { ChoiceCard } from './choice-card/ChoiceCard';
@@ -57,7 +59,8 @@ export type {
 	ChoiceCardGroupProps,
 } from './choice-card/ChoiceCardGroup';
 export type { ChoiceCardProps } from './choice-card/ChoiceCard';
-export { choiceCardThemeDefault } from './choice-card/theme';
+export { themeChoiceCard } from './choice-card/theme';
+export type { ThemeChoiceCardGroup } from './choice-card/theme';
 
 export { Footer } from './footer/Footer';
 export { BackToTop } from './footer/BackToTop';
@@ -185,10 +188,12 @@ export { SvgTextSmall } from '../vendor/icons/SvgTextSmall';
 export { SvgUpload } from '../vendor/icons/SvgUpload';
 
 export type { IconProps, IconSize } from './@types/Icons';
+export type { ThemeIcon } from './icons/theme';
 
 export type { InputSize } from './@types/InputSize';
 
-export { labelThemeDefault, labelThemeBrand } from './label/theme';
+export { themeLabel, themeBrandLabel } from './label/theme';
+export type { ThemeLabel } from './label/theme';
 export { Label } from './label/Label';
 export type { LabelProps } from './label/types';
 export { Legend } from './label/Legend';
@@ -215,11 +220,8 @@ export type { TilesProps } from './tiles/Tiles';
 export { Inline } from './inline/Inline';
 export type { InlineProps } from './inline/Inline';
 
-export {
-	linkThemeDefault,
-	linkThemeBrand,
-	linkThemeBrandAlt,
-} from './link/theme';
+export { themeLink, themeLinkBrand, themeLinkBrandAlt } from './link/theme';
+export type { ThemeLink } from './link/theme';
 export type { LinkPriority } from './link/types';
 export { Link } from './link/Link';
 export type { LinkProps } from './link/Link';
@@ -230,26 +232,33 @@ export { RadioGroup } from './radio/RadioGroup';
 export type { RadioGroupProps } from './radio/RadioGroup';
 export { Radio } from './radio/Radio';
 export type { RadioProps } from './radio/Radio';
-export { radioThemeBrand, radioThemeDefault } from './radio/theme';
+export { themeRadioGroup, themeRadio, themeRadioBrand } from './radio/theme';
+export type { ThemeRadioGroup } from './radio/theme';
 
 export { Option } from './select/Option';
 export type { OptionProps } from './select/Option';
 export { Select } from './select/Select';
 export type { SelectProps } from './select/Select';
-export { selectThemeDefault } from './select/theme';
+export { themeSelect } from './select/theme';
+export type { ThemeSelect } from './select/theme';
 
 export { TextArea } from './text-area/TextArea';
 export type { TextAreaProps } from './text-area/TextArea';
 
 export { TextInput } from './text-input/TextInput';
 export type { TextInputProps } from './text-input/TextInput';
 
-export { textInputThemeDefault } from './text-input/theme';
+export { themeTextArea } from './text-area/theme';
+export type { ThemeTextArea } from './text-area/theme';
+
+export { themeTextInput } from './text-input/theme';
+export type { ThemeTextInput } from './text-input/theme';
 
 export { InlineError } from './user-feedback/InlineError';
 export { InlineSuccess } from './user-feedback/InlineSuccess';
 export type { UserFeedbackProps } from './user-feedback/types';
 export {
-	userFeedbackThemeBrand,
-	userFeedbackThemeDefault,
+	themeUserFeedback,
+	themeUserFeedbackBrand,
 } from './user-feedback/theme';
+export type { ThemeUserFeedback } from './user-feedback/theme';

libs/@guardian/source-react-components/src/label/theme.ts

@@ -7,6 +7,8 @@ export type ThemeLabel = {
 	textError: string;
 	textSuccess: string;
 };
+
+/** @deprecated Use `themeLabel` and component `theme` prop instead of emotion's `ThemeProvider` */
 export const labelThemeDefault = {
 	label: {
 		textLabel: palette.neutral[7],
@@ -17,6 +19,7 @@ export const labelThemeDefault = {
 	},
 };
 
+/** @deprecated Use `themeLabelBrand` and component `theme` prop instead of emotion's `ThemeProvider` */
 export const labelThemeBrand = {
 	label: {
 		textLabel: palette.neutral[100],

libs/@guardian/source-react-components/src/link/theme.ts

@@ -14,6 +14,8 @@ export type LinkTheme = {
 	textSecondaryHover?: string;
 };
 
+/** @deprecated Use `themeLink` and component `theme` prop instead of emotion's `ThemeProvider` */
+
 export const linkThemeDefault: { link: LinkTheme } = {
 	link: {
 		textPrimary: palette.brand[500],
@@ -23,13 +25,16 @@ export const linkThemeDefault: { link: LinkTheme } = {
 	},
 };
 
+/** @deprecated Use `themeLinkBrand` and component `theme` prop instead of emotion's `ThemeProvider` */
+
 export const linkThemeBrand: { link: LinkTheme } = {
 	link: {
 		textPrimary: palette.neutral[100],
 		textPrimaryHover: palette.neutral[100],
 	},
 };
 
+/** @deprecated Use `themeLinkBrandAlt` and component `theme` prop instead of emotion's `ThemeProvider` */
 export const linkThemeBrandAlt: { link: LinkTheme } = {
 	link: {
 		textPrimary: palette.neutral[7],
@@ -43,3 +48,13 @@ export const themeLink: ThemeLink = {
 	textSecondary: palette.neutral[7],
 	textSecondaryHover: palette.neutral[7],
 };
+
+export const themeLinkBrand: Partial<ThemeLink> = {
+	textPrimary: palette.neutral[100],
+	textPrimaryHover: palette.neutral[100],
+};
+
+export const themeLinkBrandAlt: Partial<ThemeLink> = {
+	textPrimary: palette.neutral[7],
+	textPrimaryHover: palette.neutral[7],
+};