Implement dark mode colours

Author: emma-imber

dotcom-rendering/src/components/StackedProducts.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { palette, space, textSans15 } from '@guardian/source/foundations';
+import { space, textSans15 } from '@guardian/source/foundations';
 import {
 	SvgChevronDownSingle,
 	SvgChevronUpSingle,
@@ -8,6 +8,7 @@ import { useState } from 'react';
 import type { ArticleFormat } from '../lib/articleFormat';
 import type { ProductBlockElement } from '../types/content';
 import { HorizontalSummaryProductCard } from './HorizontalSummaryProductCard';
+import { palette } from '../palette';
 
 const showAllButtonStyles = css`
 	background-color: transparent;
@@ -17,15 +18,17 @@ const showAllButtonStyles = css`
 
 const showAllTextStyles = css`
 	${textSans15};
-	color: ${palette.lifestyle[400]};
+	color: ${palette('--product-card-read-more')};
 	font-weight: 700;
-	border-bottom: 1px solid ${palette.neutral[86]};
+	text-decoration-line: underline;
+	text-decoration-color: ${palette('--product-card-read-more-decoration')};
+	text-underline-offset: 20%;
 	padding-right: ${space[1]}px;
 `;
 
 const cardCounterStyles = css`
 	${textSans15};
-	color: ${palette.neutral[46]};
+	color: ${palette('--product-card-count')};
 	font-weight: 700;
 `;
 
@@ -79,12 +82,16 @@ export const StackedProducts = ({
 						{isExpanded ? (
 							<SvgChevronUpSingle
 								size="xsmall"
-								theme={{ fill: palette.lifestyle[400] }}
+								theme={{
+									fill: palette('--product-card-read-more'),
+								}}
 							/>
 						) : (
 							<SvgChevronDownSingle
 								size="xsmall"
-								theme={{ fill: palette.lifestyle[400] }}
+								theme={{
+									fill: palette('--product-card-read-more'),
+								}}
 							/>
 						)}
 					</button>

dotcom-rendering/src/paletteDeclarations.ts

@@ -5148,6 +5148,8 @@ const productCardReadMoreDark: PaletteFunction = () =>
 	sourcePalette.lifestyle[600];
 const productCardReadMoreDecoration: PaletteFunction = () =>
 	sourcePalette.neutral[86];
+const productCardCountLight: PaletteFunction = () => sourcePalette.neutral[46];
+const productCardCountDark: PaletteFunction = () => sourcePalette.neutral[97];
 
 const privacyTextRegularLight: PaletteFunction = () => sourcePalette.neutral[7];
 const privacyTextDark: PaletteFunction = () => sourcePalette.neutral[86];
@@ -7649,6 +7651,10 @@ const paletteColours = {
 		light: productCardReadMoreDecoration,
 		dark: productCardReadMoreDecoration,
 	},
+	'--product-card-count': {
+		light: productCardCountLight,
+		dark: productCardCountDark,
+	},
 	'--pullquote-background': {
 		light: pullQuoteBackgroundLight,
 		dark: pullQuoteBackgroundDark,