adding dark mode colours to product card and added a couple of new paletteDeclarations

Add width to storybook so it always shows at 280x regardless of the breakpoint

Author: charleycampbell

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

@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { productImage } from '../../fixtures/manual/productImage';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
@@ -256,6 +257,15 @@ const meta = {
 		},
 		showReadMore: true,
 	},
+	render: (args) => (
+		<div
+			css={css`
+				width: 280px;
+			`}
+		>
+			<ProductCarouselCard {...args} />
+		</div>
+	),
 } satisfies Meta<typeof ProductCarouselCard>;
 
 export default meta;

dotcom-rendering/src/components/ProductCarouselCard.tsx

@@ -2,13 +2,13 @@ import { css } from '@emotion/react';
 import {
 	headlineBold20,
 	headlineMedium17,
-	lifestyle,
 	space,
 	textSans17,
 	textSansBold15,
 	textSansBold17,
 } from '@guardian/source/foundations';
 import type { ArticleFormat } from '../lib/articleFormat';
+import { palette } from '../palette';
 import type { ProductBlockElement } from '../types/content';
 import { ProductCardButtons } from './ProductCardButtons';
 import { ProductCardImage } from './ProductCardImage';
@@ -26,7 +26,7 @@ const baseCard = css`
 
 const productCarouselCardHeading = css`
 	${headlineBold20};
-	color: ${lifestyle[300]};
+	color: ${palette('--product-card-headline')};
 `;
 
 const brandAndProductName = css`
@@ -37,7 +37,7 @@ const readMoreCta = css`
 	${textSansBold15};
 	text-decoration-line: underline;
 	text-decoration-color: #dcdcdc; /* stylelint-disable-line */
-	color: ${lifestyle[400]};
+	color: ${palette('--product-card-read-more')};
 	text-underline-offset: 20%;
 	padding-bottom: ${space[2]}px;
 `;

dotcom-rendering/src/paletteDeclarations.ts

@@ -5096,10 +5096,19 @@ const productCardBorderLight: PaletteFunction = () =>
 	sourcePalette.lifestyle[300];
 const productCardBorderDark: PaletteFunction = () =>
 	sourcePalette.lifestyle[500];
+const productCardHeadingTextLight: PaletteFunction = () =>
+	sourcePalette.lifestyle[300];
+const productCardHeadingTextDark: PaletteFunction = () =>
+	sourcePalette.lifestyle[500];
 const productCardBorderNeutralDark: PaletteFunction = () =>
 	sourcePalette.neutral[38];
 const productCardBorderNeutralLight: PaletteFunction = () =>
 	sourcePalette.neutral[86];
+const productCardReadMoreLight: PaletteFunction = () =>
+	sourcePalette.lifestyle[400];
+const productCardReadMoreDark: PaletteFunction = () =>
+	sourcePalette.lifestyle[600];
+
 const privacyTextRegularLight: PaletteFunction = () => sourcePalette.neutral[7];
 const privacyTextDark: PaletteFunction = () => sourcePalette.neutral[86];
 const witnessTitleText: PaletteFunction = ({ theme }) => {
@@ -7541,6 +7550,14 @@ const paletteColours = {
 		light: productCardBorderNeutralLight,
 		dark: productCardBorderNeutralDark,
 	},
+	'--product-card-headline': {
+		light: productCardHeadingTextLight,
+		dark: productCardHeadingTextDark,
+	},
+	'--product-card-read-more': {
+		light: productCardReadMoreLight,
+		dark: productCardReadMoreDark,
+	},
 	'--pullquote-background': {
 		light: pullQuoteBackgroundLight,
 		dark: pullQuoteBackgroundDark,