Prefer alternative over dark when referring to the second theme for star ratings.

This is to prevent overloading the term dark which is more commonly used in the code base to refer to dark mode

Author: abeddow91

dotcom-rendering/src/components/FeatureCard.tsx

@@ -645,7 +645,7 @@ export const FeatureCard = ({
 												<StarRating
 													rating={starRating}
 													size={starRatingSize}
-													useDarkTheme={true}
+													useAltTheme={true}
 												/>
 											) : (
 												<div css={starRatingWrapper}>

dotcom-rendering/src/components/StarRating/StarRating.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-
 import { type Props, StarRating } from './StarRating';
 
 const meta = {
@@ -61,9 +60,9 @@ export const StarsWithLargePadding: Story = {
 	},
 };
 
-export const StarsWithDarkTheme: Story = {
+export const StarsWithAlternativeTheme: Story = {
 	args: {
 		size: 'large',
-		useDarkTheme: true,
+		useAltTheme: true,
 	},
 };

dotcom-rendering/src/components/StarRating/StarRating.tsx

@@ -23,8 +23,8 @@ const emptyStarColor = css`
 	background-color: ${palette('--star-rating-empty-background')};
 `;
 
-const emptyStarDarkColor = css`
-	background-color: ${palette('--star-rating-empty-dark-background')};
+const emptyStarAltColor = css`
+	background-color: ${palette('--star-rating-empty-alt-background')};
 `;
 
 const determineSize = (size: RatingSizeType) => {
@@ -108,15 +108,15 @@ export type Props = {
 	rating: Rating;
 	size: RatingSizeType;
 	paddingSize?: PaddingSizeType;
-	/** The dark theme is to account for star ratings that appear on lighter / translucent backgrounds (eg feature cards). The dark theme ensures we meet AA accessibility standard*/
-	useDarkTheme?: boolean;
+	/** The alternative theme is to account for star ratings that appear on lighter / translucent backgrounds (e.g. feature cards). The alternative theme ensures we meet AA accessibility standards */
+	useAltTheme?: boolean;
 };
 
 export const StarRating = ({
 	rating,
 	size,
 	paddingSize = 'small',
-	useDarkTheme = false,
+	useAltTheme = false,
 }: Props) => (
 	<div
 		css={[determineSize(size), determinePaddingTop(paddingSize), container]}
@@ -131,7 +131,7 @@ export const StarRating = ({
 					key={i}
 					css={[
 						starBackground,
-						useDarkTheme ? emptyStarDarkColor : emptyStarColor,
+						useAltTheme ? emptyStarAltColor : emptyStarColor,
 					]}
 				>
 					<SvgStarOutline />

dotcom-rendering/src/paletteDeclarations.ts

@@ -7967,7 +7967,7 @@ const paletteColours = {
 		light: starRatingEmptyBackgroundColourLight,
 		dark: starRatingEmptyBackgroundColourDark,
 	},
-	'--star-rating-empty-dark-background': {
+	'--star-rating-empty-alt-background': {
 		light: starRatingEmptyBackgroundColourDark,
 		dark: starRatingEmptyBackgroundColourDark,
 	},